<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="author" content="order by dede58.com"/>
<title>详情页面</title>
  <link rel="stylesheet" href="../static/css/index.css" th:href="@{/static/css/index.css}">
  <link rel="stylesheet" href="../static/css/reset.css" th:href="@{/static/css/reset.css}">
<link href="../static/css/tk/shopdetail.css" th:href="@{/static/css/tk/shopdetail.css}" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/fontas/css/font-awesome.css" th:href="@{/static/fontas/css/font-awesome.css}">
  <link rel="stylesheet" href="static/css/topNav.css" th:href="@{/static/css/topNav.css}">
  <link rel="stylesheet" href="../static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}"  media="all">
<style>
       .layui-bg-red{ 
            background-color: #FF4466 !important;
        }
    </style>

</head>

<body>
<!-----header部分-------> 
<header class="header">
    <div class="header-inner body-width">
      <a href="#" class="logo"></a>
      <div class="category">
       
      </div>
      <div class="search">
        <input type="text" class="search-text" placeholder="输入商品名活淘宝商品链接">
        <button class="search-btn"><i class="icon-search"></i></button>
      </div>
      <nav class="header-nav">
        <ul>
          <li>
            <span class="line"></span>
            <a href="#" class="dreamer">lemon莱萌</a>
            <i class="icon-text__pink icon-new">new</i>
          </li>
          <li>
            <span class="line"></span>
            <a href="#" class="icon-text__pink register">注册</a>
          </li>
          <li>
            <span class="line"></span>
            <a href="#">登录</a>
          </li>
          <li>
            <span class="line"></span>
            <a href="#">个人中心</a>
          </li>
          <li>
            <span class="line"></span>
            <i class="icon-app"></i>
            <a href="#" class="app">手机版</a>
            <i class="icon-arrow"></i>
            <div class="app-hover">
              <a href="#"></a>
              <p>扫一扫下载手机客户端</p>
            </div>
          </li>
        </ul>
      </nav>
    </div>
    <div class="header-shadow"></div>
  </header>
 <div id="particles-js"></div>  
<!-----header结束-------> 
<!-----导航开始 -->
<div class="nav_bar">
    <div style="background-color: #FF4466; width: 100%">
        <ul class="layui-nav layui-bg-red body-width">
            <li class="layui-nav-item"><a href="index.html" th:href="@{/index.html}"><i
                    class="fa fa-bars"></i>&nbsp;今日上新</a></li>
            <li class="layui-nav-item "><a href="">女装尖货</a></li>
            <li class="layui-nav-item"><a href="">母婴热推</a></li>
            <li class="layui-nav-item"><a href="javascript:;">特价好货</a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="">20元封顶</a>
                    </dd>
                    <dd>
                        <a href="">后台模版</a>
                    </dd>
                    <dd>
                        <a href="">电商平台</a>
                    </dd>
                </dl></li>
            <li class="layui-nav-item"><a href=""><i
                    class="fa fa-shopping-bag">&nbsp;</i>超值9块9</a></li>
            <li class="layui-nav-item"><a href=""></a></li>
            <li class="layui-nav-item"><a href="" style="color:yellow;font-size: 22px !important ">超级返利</a></li>
            <li class="layui-nav-item"><a href=""></a></li>
            <li class="layui-nav-item  layui-this"><a
                href="quanzhida.html" th:href="@{/quanzhida.html}" style="color:white;font-size: 18px;">券直达</a></li>
        </ul>
    </div>
</div>
<!-----导航结束-->
<!-----商品详情部分------->
<div class="shopdetails"> 
    <!-------放大镜-------->
        <div id="leftbox">
            <div id="showbox">
                <img
                    src="" th:src="${item.itemPic}"
                    width="400"
                    height="400" /> 
                   <!--  <img
                    src="static/tk/images/shopdetail/img02.png"
                    width="400"
                    height="550" /> <img
                    src="static/tk/images/shopdetail/img03.png"
                    width="400"
                    height="550" /> <img
                    src="static/tk/images/shopdetail/img04.png"
                    width="400"
                    height="550" /> <img
                    src="static/tk/images/shopdetail/img05.png"
                    width="400"
                    height="400" /> <img
                    src="static/tk/images/shopdetail/img01.png"
                    width="400"
                    height="400" /> -->
            </div>
            <!--展示图片盒子-->
            <div id="showsum"></div>
            <!--展示图片里边-->
           <!--  <p class="showpage">
                <a
                    href="javascript:void(0);"
                    id="showlast"> < </a> <a
                    href="javascript:void(0);"
                    id="shownext"> > </a>
            </p> -->
        </div>
        <!----中间----->
    
    <div class="centerbox">
        <div class="imgname"><a href="javascript:;" target="_blank" th:href="${item.itemCouponUrl}" th:text="${item.title}">【5.5斤】白糯大棒玉米东北真空粘苞米微甜黏嫩香</a></div> 
        <p class="Aprice">价格：<samp>￥<span th:text="${item.discountPrice}">89.00</span></samp></p>
        <p class="price">券后价：<samp>￥<span th:text="${item.amountPrice}">89.00</span></samp></p>
        <p class="youhui">店铺优惠：<samp>满89减40</samp></p>
        
        <div>
            <div class="count_ta">
                <span>优惠券总数<b>10000</b>张</span>
                <span>|</span>
                <span>剩余<b>1</b>张</span>
            </div>
            <div class="count_ta_2">
                <span>月销:<b th:text="${item.biz30Day}">1</b></span>
                <span>|</span>
                <span>预计获得积分:<b>100</b></span>
                <span><i class="fa fa-question-circle-o"></i></span>
                <span class="show_jifen_q" style="display:none">积分是指在本站领券购买之后获得的积分,积分可以兑换现金</span>
            </div>
        </div>
        
        
        <div>
            <div class="buy_btn_q buy_btn_q_1"><span >优惠券</span><span style="margin-left:13px;">￥<b th:text="${item.amount}">4</b></span>
            <a href="javascript:;" target="_blank" th:href="${item.itemCouponUrl}">先领券<br>再下单</a></div>
            <div class="buy_btn_q buy_btn_q_2"><i class="fa fa-qrcode fa-4x"></i>(手机淘宝扫一扫直接领券)</div>
            <div class="buy_btn_q buy_btn_q_3"></div>
        </div> 
        
       <!--  <p class="kefu">客服：</p>
        <ul>
            <li class="kuanshi">款式：</li>
            <li class="now shopimg"><a href="#" title="熊猫套装"><img src="static/tk/images/shopdetail/kuanshi01.jpg" width="45"></a></li>
            <li class="shopimg"><a href="#" title="铁塔套装"><img src="static/tk/images/shopdetail/kuanshi02.jpg" width="45"></a></li>
            <li class="shopimg"><a href="#" title="创意胡子"><img src="static/tk/images/shopdetail/kuanshi03.jpg" width="45"></a></li>
            <li class="shopimg"><a href="#" title="四色小猫"><img src="static/tk/images/shopdetail/kuanshi04.jpg" width="45"></a></li>
        </ul>
        <div class="clear"></div>
        <p class="chima">尺码：</p> -->
        <!-- <div class="clear"></div>
        <p class="buy"><a href="#" id="firstbuy">立即购买</a><a href="#">加入购物车</a></p>
        <div class="clear"></div> -->
        <!-- <div class="fenx"><a href="#"><img src="static/tk/images/shopdetail/tell07.png"></a></div>
        <p class="fuwu">服务承诺：</p>
        <p class="pay">支付方式：</p> -->
    </div>
    
    <!-----右边------->
    <div class="rightbox">
        <p class="name">——热卖商品</p>
        <img src="static/tk/images/shopdetail/reimai02.jpg" width="130" height="130">
        <p>￥58元</p>
        <img src="static/tk/images/shopdetail/reimai01.jpg" width="130" height="130">
        <p>￥58元</p>
        <img src="static/tk/images/shopdetail/reimai03.jpg" width="130" height="130">
        <p>￥58元</p>
    </div>
</div>
<!-----商品详情部分结束-------> 
<!-----商品详情评价部分------->

<!-----商品详情评价部结束分-------> 

<!----bottom_页脚部分----->
<div class="backf footer" >
    <div class="footer-container">
      <div class="footer-link">
        <div class="footer-link__item">
          <h4 class="footer-title">关于我们</h4>
          <ul class="footer-list">
            <li class="item"><a href="#">关于我们</a></li>
            <li class="item"><a href="#">帮助中心</a></li>
            <li class="item"><a href="#">加入我们</a></li>
            <li class="item"><a href="#">联系我们</a></li>
            <li class="item"><a href="#">标签集</a></li>
            <li class="item"><a href="#">商务合作</a></li>
            <li class="item"><a href="#">免责声明</a></li>
          </ul>
        </div>
        <div class="footer-link__item">
          <h4 class="footer-title">手机应用</h4>
          <ul class="footer-list">
            <li class="item"><a href="#">关于我们</a></li>
            <li class="item"><a href="#">帮助中心</a></li>
            <li class="item"><a href="#">加入我们</a></li>
          </ul>
        </div>
        <div class="footer-link__item">
          <div class="footer-orcode"><img src="static/images/app_qrcode.png"  th:src="@{/static/images/app_qrcode.png}" alt="#"></div>
          <div class="orcode-text">
            <p>扫描二维码</p>
            <p>使用小程序</p>
          </div>
        </div>
        <div class="footer-link__item">
          <h4 class="footer-title">关注我们</h4>
          <ul class="footer-list">
            <li class="item"><a href="#">关于我们</a></li>
            <li class="item"><a href="#">帮助中心</a></li>
          </ul>
        </div>
        <div class="footer-link__item">
          <h4 class="footer-title">友情链接</h4>
          <ul class="footer-list">
            <li class="item"><a href="#">关于我们</a></li>
            <li class="item"><a href="#">&nbsp;</a></li>
            <li class="item"><a href="#">帮助中心</a></li>
          </ul>
        </div>
        <div class="fopter-copyright">
        <br>
        ©2017 ****** 版权所有。
      </div>
      </div>
      
    </div>
</div>
</body>
</html>
<script src="../static/js/jquery-2.1.1.min.js" th:src="@{/static/js/jquery-2.1.1.min.js}"></script>
<script src="../static/js/jquery.qrcode.min.js" th:src="@{/static/js/jquery.qrcode.min.js}"></script>
<script src="../static/js/tk/ljsGlasses.js" th:src="@{/static/js/tk/ljsGlasses.js}"></script>
<script src="../static/js/particles.min.js" th:src="@{/static/js/particles.min.js}"></script>
<script src="../static/js/particles.min.js" th:src="@{/static/layui/layui.js}" charset="utf-8"></script>
<script src="../static/js/app.js" th:src="@{/static/js/app.js}"></script>
<script type="text/javascript">
  $(document).ready(function(){
      var showproduct = {
          "boxid":"showbox",
          "sumid":"showsum",
          "boxw":400,
          "boxh":400,
          "sumw":60,//列表每个宽度,该版本中请把宽高填写成一样
          "sumh":60,//列表每个高度,该版本中请把宽高填写成一样
          "sumi":7,//列表间隔
          "sums":0,//列表显示个数
          "sumsel":"sel",
          "sumborder":1,//列表边框，没有边框填写0，边框在css中修改
          "lastid":"showlast",
          "nextid":"shownext"
          };//参数定义    
     $.ljsGlasses.pcGlasses(showproduct); //方法调用，务必在加载完后执行

	layui.use('element', function() {
		var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
		//监听导航点击
		element.on('nav(demo)', function(elem) {
			//console.log(elem)
			layer.msg(elem.text());
		});
	});
	
	$(".buy_btn_q_2 i").hover(  
         function(){  
            console.log();
            var ret = $(".buy_btn_q_1 a").attr("href");
            if(!$('.buy_btn_q_3').html()){
	            $('.buy_btn_q_3').qrcode({
	                render: "canvas", //table方式
	                width: 200, //宽度
	                height:200, //高度
	                text: ret
	            });
            }
             $(".buy_btn_q_3").show();
         } ,  
         function(){  
             $(".buy_btn_q_3").hide();
         });  
	$(".count_ta_2 i").hover(  
         function(){  
             $(".show_jifen_q").show();
         } ,  
         function(){  
             $(".show_jifen_q").hide();
         });  

});
</script>
